import React, { useState } from 'react';
import { Card, List, Empty, Button, Modal, Checkbox, Tabs } from 'antd';

const AuditReportConversion: React.FC = () => {
  const [activeTab, setActiveTab] = useState('stateToListed');
  const [reportConvertModalVisible, setReportConvertModalVisible] = useState(false);
  const [activeConvertTab, setActiveConvertTab] = useState('state-owned');
  const [selectedCompanies, setSelectedCompanies] = useState<string[]>([]);
  
  // 公司数据
  const stateOwnedCompanies = ['中国航空器材集团有限公司', '中国航空器材有限责任公司', '中航材(北京)物流有限公司', '中国航空器材西南有限公司', '中国航空器材集团有限公司(本部汇总)'];
  const listedCompanies = ['中国航空器材集团有限公司(合并)', '中国航空器材有限责任公司(合并)', '中航材(北京)物流有限公司(合并)', '中国航空器材西南有限公司(合并)', '中国航空器材有限责任公司(本部)'];

  // 处理公司选择
  const handleCompanySelect = (checkedValues: string[]) => {
    setSelectedCompanies(checkedValues);
  };

  // 处理报表转换Tab切换时清空选择
  const handleConvertTabChange = (key: string) => {
    setActiveConvertTab(key);
    setSelectedCompanies([]);
  };
  
  // 根据当前tab获取对应的公司数据
  const getCurrentCompanies = () => {
    switch (activeTab) {
      case 'stateToListed':
      case 'stateToJiuqi':
        return stateOwnedCompanies;
      case 'listedToState':
      case 'listedToJiuqi':
        return listedCompanies;
      default:
        return [];
    }
  };
  
  // Tab配置
  const tabItems = [
    {
      key: 'stateToListed',
      label: '国企转上市',
    },
    {
      key: 'listedToState', 
      label: '上市转国企',
    },
    {
      key: 'stateToJiuqi',
      label: '国企转久其',
    },
    {
      key: 'listedToJiuqi',
      label: '上市转久其',
    },
  ];
  
  const handleTabChange = (key: string) => {
    setActiveTab(key);
  };
  
  return (
    <div style={{ padding: '16px', height: '85vh', display: 'flex', flexDirection: 'column' }}>
      {/* 报表转换按钮 */}
      <div style={{ marginBottom: '16px', display: 'flex', }}>
        <Button 
          type="primary" 
          onClick={() => setReportConvertModalVisible(true)}
          style={{ backgroundColor: '#4f2d7e', borderColor: '#4f2d7e' }}
        >
          报表转换
        </Button>
      </div>
      
      {/* 自定义Tab切换 */}
      <div style={{ 
        marginBottom: '16px', 
        borderBottom: '1px solid #d9d9d9',
        display: 'flex'
      }}>
        {tabItems.map((item) => (
          <div
            key={item.key}
            onClick={() => handleTabChange(item.key)}
            style={{
              padding: '12px 5px',
              cursor: 'pointer',
              marginRight: '20px',
              borderBottom: activeTab === item.key ? '2px solid #4f2d7e' : '2px solid transparent',
               color: activeTab === item.key ? '#4f2d7e' : '#666',
              fontWeight: activeTab === item.key ? '500' : 'normal',
              transition: 'all 0.3s ease',
              userSelect: 'none'
            }}
            onMouseEnter={(e) => {
               if (activeTab !== item.key) {
                 e.currentTarget.style.color = '#4f2d7e';
               }
             }}
            onMouseLeave={(e) => {
              if (activeTab !== item.key) {
                e.currentTarget.style.color = '#666';
              }
            }}
          >
            {item.label}
          </div>
        ))}
      </div>
      
      {/* 内容区域 */}
      <div style={{ flex: 1, display: 'flex', gap: '16px' }}>
        {/* 左侧公司列表 */}
        <Card 
          title="公司名称" 
          style={{ width: '300px', height: 'fit-content' }}
          bodyStyle={{ padding: '8px' }}
        >
          <List
            size="small"
            dataSource={getCurrentCompanies()}
            renderItem={(company) => (
              <List.Item 
                style={{ 
                  padding: '8px 12px', 
                  cursor: 'pointer',
                  borderRadius: '4px',
                  transition: 'background-color 0.2s'
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.backgroundColor = '#f5f5f5';
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.backgroundColor = 'transparent';
                }}
              >
                <span style={{ fontSize: '14px' }}>{company}</span>
              </List.Item>
            )}
          />
        </Card>
        
        {/* 右侧报表区域 */}
        <Card 
          title="报表内容" 
          style={{ flex: 1 }}
          bodyStyle={{ 
            height: 'calc(100vh - 200px)', 
            display: 'flex', 
            alignItems: 'center', 
            justifyContent: 'center' 
          }}
        >
          <div style={{ textAlign: 'center', color: '#999', fontSize: '14px' }}>
              暂无报表数据
            </div>
        </Card>
      </div>
      
      {/* 报表转换弹窗 */}
      <Modal
        title="报表转换"
        open={reportConvertModalVisible}
        onCancel={() => setReportConvertModalVisible(false)}
        footer={[
          <Button key="cancel" onClick={() => setReportConvertModalVisible(false)}>
            取消
          </Button>,
          <Button 
            key="convert" 
            type="primary" 
            disabled={selectedCompanies.length === 0}
            style={{ backgroundColor: '#4f2d7e', borderColor: '#4f2d7e' }}
            onClick={() => {
              const convertType = activeConvertTab === 'state-owned' ? '国企转上市' : '上市转国企';
              console.log(`执行${convertType}，选中的公司:`, selectedCompanies);
              // 这里可以添加转换逻辑
              setReportConvertModalVisible(false);
              setSelectedCompanies([]);
            }}
          >
            {activeConvertTab === 'state-owned' ? '国企转上市' : '上市转国企'}
          </Button>
        ]}
        width={600}
      >
        <Tabs
          activeKey={activeConvertTab}
          onChange={handleConvertTabChange}
          items={[
            {
              key: 'state-owned',
              label: '国企',
              children: (
                <div>
                  <div style={{ maxHeight: 300, overflowY: 'auto' }}>
                    <Checkbox.Group
                      value={selectedCompanies}
                      onChange={handleCompanySelect}
                      style={{ width: '100%' }}
                    >
                      {stateOwnedCompanies.map((company, index) => (
                        <div key={index} style={{ padding: '8px 12px', border: '1px solid #f0f0f0', marginBottom: 8, borderRadius: 4, width: '100%' }}>
                          <Checkbox value={company} style={{ width: '100%' }}>
                            {company}
                          </Checkbox>
                        </div>
                      ))}
                    </Checkbox.Group>
                  </div>
                </div>
              )
            },
            {
              key: 'listed',
              label: '上市',
              children: (
                <div>
                  <div style={{ maxHeight: 300, overflowY: 'auto' }}>
                    <Checkbox.Group
                      value={selectedCompanies}
                      onChange={handleCompanySelect}
                      style={{ width: '100%' }}
                    >
                      {listedCompanies.map((company, index) => (
                        <div key={index} style={{ padding: '8px 12px', border: '1px solid #f0f0f0', marginBottom: 8, borderRadius: 4, width: '100%' }}>
                          <Checkbox value={company} style={{ width: '100%' }}>
                            {company}
                          </Checkbox>
                        </div>
                      ))}
                    </Checkbox.Group>
                  </div>
                </div>
              )
            }
          ]}
        />
      </Modal>
    </div>
  );
};

export default AuditReportConversion;
